<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="采购单号" prop="ordersNumber">
        <el-input
          v-model="queryParams.ordersNumber"
          placeholder="请输入计划单号"
          clearable
        />
      </el-form-item>
      <el-form-item label="供应商" prop="id">
        <treeselect
          v-model="queryParams.id"
          :options="vendorOptions"
          :show-count="true"
          placeholder="请输入供应商"
          style="width: 210px"
        />
      </el-form-item>
      &nbsp;
      <el-form-item label="付款状态" prop="advanceStatus">
        <el-select
          v-model="queryParams.advanceStatus"
          placeholder="请选择付款状态"
          clearable
        >
          <el-option
            v-for="dict in dict.type.advance_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="payableList" ref="myTable">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="付款类型" prop="paymentType" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.request_payment_type"
            :value="scope.row.paymentType"
          />
        </template>
      </el-table-column>
      <el-table-column label="供应商编号" align="center" prop="vendorNumber" />
      <el-table-column label="供应商名称" align="center" prop="vendorName">
        <template slot-scope="scope">
          <span v-if="scope.row.vendorName">
            {{ scope.row.vendorName.slice(0, 10) }}
            <span v-if="scope.row.vendorName.length > 10">...</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="采购订单号" align="center" prop="ordersNumber" />
      <el-table-column label="应付金额">
        <template slot-scope="scope">
          <div>
            <span>货贷金额：{{ scope.row.amountDue }}</span
            ><br />
            <span>预付金额：{{ scope.row.requestAmount }}</span>
            <br />
            <span>汇率：{{ scope.row.currency }}</span>
            <br />
            <span>运费金额：{{ scope.row.freight }}</span>
            <br />
            <span>优惠金额：{{ scope.row.discountAmount }}</span>
            <br />
            <span>应付金额：{{ scope.row.amountRequested }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="币种" prop="monetaryName" align="center" />
      <el-table-column label="付款状态" prop="advanceStatus" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.advance_status"
            :value="scope.row.advanceStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-dropdown
            size="mini"
            @command="(command) => handleCommand(command, scope.row)"
            v-hasPermi="[
              'finance:advance:edit',
              'finance:advance:applicant',
              'finance:advance:applicant',
            ]"
          >
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
              >更多</el-button
            >
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                command="handlePayment"
                icon="el-icon-finished"
                v-hasPermi="['finance:advance:applicant']"
                >付款</el-dropdown-item
              >
              <el-dropdown-item
                command="handleQuash"
                icon="el-icon-document-delete"
                v-hasPermi="['finance:advance:query']"
                >查看明细</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import { listPayable } from "@/api/finance/payable";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getSelectVendorTreeList } from "@/api/procured/plan";
export default {
  dicts: ["advance_status", "request_payment_type", "advance_status"],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        advanceStatus: null,
      },
      // 供应商
      vendorOptions: [],
      // 显示搜索条件
      showSearch: true,
      // 应付款表格数据
      payableList: [],
    };
  },
  created() {
    this.getVendor();
    this.getList();
  },
  methods: {
    /** 查询供应商的下拉数据结果 */
    getVendor() {
      getSelectVendorTreeList().then((response) => {
        this.vendorOptions = response.data;
      });
    },

    /** 条件查询应付款记录 */
    getList() {
      this.loading = true;
      listPayable(this.queryParams).then((response) => {
        this.payableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style>
</style>